
(function (React) {
	var  todos = [
		{ id: 1, title: '玩', component: true },
		{ id: 2, title: '吃饭', component: false },
		{ id: 3, title: '睡觉', component: true },
	]
	 todos = JSON.parse(localStorage.getItem('todos')) || []

	const title = "What needs to be done?"

	window.App = class extends React.Component {
		constructor() {
			super()
			this.state = {
				todos,
				title
			}
		}

		render() {
			return (
				<div>
					<section className="todoapp">
						<header className="header">
							<h1>todos</h1>
							<input className="new-todo"
								onKeyDown={this.handleKeyDowm.bind(this)}
								placeholder={this.state.title} autoFocus />
						</header>
						{this.state.todos.length > 0 && this.getMianFotter()}
					</section>
					{this.getfooter()}
				</div>
			)
		}


		handleKeyDowm(e) {
			const { target, keyCode } = e
			const inputText = target.value.trim()
			if (keyCode == 13 &&!inputText.length==0) {
				this.state.todos.push({
					id:this.state.todos.length+1,
					title:inputText,
					component:false
				})
				this.setState(this.state.todos)
				target.value=''
			}
			localStorage.setItem('todos',JSON.stringify(this.state.todos))

		}




		getListTodos() {
			return this.state.todos.map(item => {
				return (
					<li key={item.id} className="completed">
						<div className="view">
							<input className="toggle" type="checkbox" defaultChecked />
							<label>{item.title}</label>
							<button className="destroy"></button>
						</div>
						<input className="edit" defaultchange="Create a TodoMVC template" />
					</li>
				)
			}

			)
		}



		getMianFotter() {
			return (
				< div >
					<section className="main">
						<input id="toggle-all" className="toggle-all" type="checkbox" />
						<label htmlFor="toggle-all">Mark all as complete</label>
						<ul className="todo-list">
							{/** 这个是html外引入**/}
							{this.getListTodos()}
							{/*
								{
									this.state.todos.map(item => {
										return (
											<li className="completed" key={item.id}>
												<div className="view">
													<input className="toggle" type="checkbox" defaultChecked />
													<label>{item.title}</label>
													<button className="destroy"></button>
												</div>
												<input className="edit" defaultchange="Create a TodoMVC template" />
											</li>
										)
									}

									)
								*/}

						</ul>
					</section>


					<footer className="footer">
						<span className="todo-count"><strong>0</strong> item left</span>
						<ul className="filters">
							<li>
								<a className="selected" href="#/">All</a>
							</li>
							<li>
								<a href="#/active">Active</a>
							</li>
							<li>
								<a href="#/completed">Completed</a>
							</li>
						</ul>
						<button className="clear-completed">Clear completed</button>
					</footer>
				</div >

			)
		}


		getfooter() {
			return (
				<footer className="info">
					<p>Double-click to edit a todo</p>
					<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
					<p>Created by <a href="http://todomvc.com">you</a></p>
					<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
				</footer>
			)
		}
	}
})(React)


	// /*
	//  * class className
	//  * 单标签必须结束
	//  * autofocus autoFocus
	//  * 注释
	//  * checked defaultChecked
	//  * value defaultValue
	//  * for htmlFor
	//  * 
	//  * 报错里有提示
//  * /